<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <input type="text" v-model='name'>
        <input type="text" v-model='age'>
        <h2>{{reverse()}}</h2>
        <h2>{{name|reverse}}</h2>
        <h2>{{revName}}</h2>
    </div>
</body>
</html>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  /* 
      methods 或者 过滤器 ； 在DOM更新的时候 都会执行
      但是 computed 只会在依赖更新的时候 才会执行
   */
    Vue.filter('reverse',function(val){
      console.log('filter')
      return val.split('').reverse().join('')
    })
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            age:11,
            // revName:''
        },
        computed: {
          // 计算属性中的属性名不能跟 data和 methods中重复
          // computed  data methods  props 这四个中的属性 最终都会被挂载到当前实例上
          revName(){
            console.log('computed')
            // 依赖 指的是  当前函数体内同步使用的vue变量
            // 在revName中 只使用了 this.name; 也就是说 只有当name发生改变的时候 才会执行该函数
            // 计算属性的缓存值 说的就是 上次计算的结果

            // 当我们发现 某些要写的变量 存在依赖关系的时候 我们应当使用 计算属性
            setTimeout(() => {
              console.log(this.age)
            }, 100);
            return this.name.split('').reverse().join('')
          },
          revName:{
            get(){
              // 上边的这种简写方式 只是相当于 写了一个 get
              return this.name.split('').reverse().join('')
            },
            set(val){
              // val 就是要设置的那个值
              this.name = val
            }
          }
        },
        methods: {
          reverse(){
            console.log('methods')
            return this.name.split('').reverse().join('')
          }
        },
    });
</script>